<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Animation - Basic</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  <script type="module">
    import { createAnimation } from '../../../../dist/ionic/index.esm.js';
    
    const squareA = document.querySelectorAll('.square-a');
    const squareB = document.querySelectorAll('.square-b');
    const squareC = document.querySelectorAll('.square-c');
    const squareCText = document.querySelectorAll('.square-c .text');
        
    const animationA = createAnimation('animation-a');
    const animationB = createAnimation('animation-b');
    const animationC = createAnimation('animation-c');
    
    const animationCSubA = createAnimation('animation-c-sub-a');
    const animationCSubB = createAnimation('animation-c-sub-b');
    
    animationA
      .addElement(squareA)
      .duration(1000)
      .easing('linear')
      .iterations(1)
      .keyframes([
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 0 },
        { transform: 'scale(1.5) rotate(45deg)', opacity: 0.5, offset: 0.5 },
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 1 }
      ])
      .beforeStyles({
        'background': 'rgba(0, 0, 255, 0.5'
      })
      .afterStyles({
        'background': 'rgba(0, 255, 0, 0.5)'
      });

    animationB
      .addElement(squareB)
      .duration(500)
      .easing('ease-in-out')
      .iterations(1)
      .keyframes([
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 0 },
        { transform: 'scale(0.5) rotate(-45deg)', opacity: 0.5, offset: 0.5 },
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 1 }
      ])
      .beforeStyles({
        'background': 'rgba(0, 0, 255, 0.5'
      })
      .afterStyles({
        'background': 'rgba(0, 255, 0, 0.5)'
      });
      
    animationCSubA
      .addElement(squareCText)
      .duration(1000)
      .delay(2000)
      .keyframes([
        {
          offset: 0,
          transform: 'scale(1)'
        },
        {
          offset: 0.5,
          transform: 'scale(1.5)'
        },
        {
          offset: 1,
          transform: 'scale(1)'
        }
      ])
      .fromTo('color', 'red', 'blue')
      .onFinish(() => {
        document.querySelector('li.animation-c-sub-a .status').innerText = 'DONE';
      });
      
    animationCSubB
      .addElement(squareCText)
      .duration(1000)
      .delay(3500)
      .fromTo('background', 'red', 'blue')
      .onFinish(() => {
        document.querySelector('li.animation-c-sub-b .status').innerText = 'DONE';
      });

    animationC
      .addElement(squareC)
      .duration(2000)
      .easing('ease-in-out')
      .iterations(1)
      .keyframes([
        { transform: 'scale(1) skew(0deg)', opacity: 1, offset: 0 },
        { transform: 'scale(1.5) skew(15deg)', opacity: 0.5, offset: 0.5 },
        { transform: 'scale(1) skew(0deg)', opacity: 1, offset: 1 }
      ])
      .beforeStyles({
        'background': 'rgba(0, 0, 255, 0.5'
      })
      .afterStyles({
        'background': 'rgba(0, 255, 0, 0.5)'
      })
      .addAnimation([animationCSubA, animationCSubB])
      .onFinish(() => {
        document.querySelector('li.animation-c .status').innerText = 'DONE';
      });
      
    animationA.onFinish(() => {
      animationB.play();
      document.querySelector('li.animation-a .status').innerText = 'DONE';
    });
    animationB.onFinish(() => {
      animationC.play()
      document.querySelector('li.animation-b .status').innerText = 'DONE';
    }); 
      
    document.querySelector('.play').addEventListener('click', () => {
      animationA.play();
      document.querySelectorAll('.status').forEach(status => {
        status.innerText = '';
      })
    });
    
    document.querySelector('.pause').addEventListener('click', () => {
      animationA.pause();
    });
    
    document.querySelector('.destroy').addEventListener('click', () => {
      animationA.destroy();
    });
    
    document.querySelector('.stop').addEventListener('click', () => {
      animationA.stop();
      
      document.querySelectorAll('.status').forEach(status => {
        status.innerText = '';
      })
    });
  </script>
  
  <style>
    .square {
      width: 100px;
      height: 100px;
      background: rgba(0, 0, 255, 0.5);
      text-align: center;
      line-height: 100px;
      margin-left: 25px;
      margin-top: 25px;
      margin-bottom: 25px;
    }
    
    .status-pane {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 300px;
      height: 400px;
      padding-right: 10px;
      background: rgba(0, 0, 0, 0.3);
    }
    
    li .status {
      float: right;
    }
  </style>
  </head>

<body
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>Animations</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content>
      <div class="ion-padding">
        <ion-button class="play">Play</ion-button>
        <ion-button class="pause">Pause</ion-button>
        <ion-button class="stop">Stop</ion-button>
        <ion-button class="destroy">Destroy</ion-button>
        
        <div class="square square-a">
          <div class="text">Hello</div>
        </div>
        
        <div class="square square-b">
          <div class="text">Hello</div>
        </div>
        
        <div class="square square-c">
          <div class="text">Hello</div>
        </div>
        
        <div class="status-pane">
          <ul>
            <li class="animation-a">Animation A<div class="status"></div></li>
          </ul>
          
          <ul>
            <li class="animation-b">Animation B<div class="status"></div></li>
          </ul>
          
          <ul>
            <li class="animation-c">Animation C<div class="status"></div></li>
            <ul>
              <li class="animation-c-sub-a">Animation C sub A<div class="status"></div></li>
              <li class="animation-c-sub-b">Animation C sub B<div class="status"></div></li>
            </ul>
          </ul>
        </div>
      </div>
    </ion-content>
  </ion-app>
</body>

</html>

